<template>
  <div class="login">
    <!-- 顶部栏 -->
    <div class="topBar">
      <van-nav-bar class="page-nav-bar" title="登录">
        <van-icon slot="left" name="cross" size="18" @click="$router.back()" />
      </van-nav-bar>
    </div>
    <!-- 中间用户登录区 -->
    <div class="banner">
      <van-form validate-first @submit="onSubmit" ref="userFormRef">
        <van-field
          class="moblie_inp"
          :rules="userFormRules.mobile"
          v-model="userForm.mobile"
          name="mobile"
          placeholder="请输入手机号"
          type="number"
          maxlength="11"
        >
          <template #left-icon>
            <i class="iconfont icon-shouji"></i>
          </template>
        </van-field>
        <van-field
          class="code_inp"
          :rules="userFormRules.code"
          v-model="userForm.code"
          name="code"
          placeholder="请输入验证码"
          type="number"
          maxlength="6"
        >
          <template #left-icon>
            <i class="iconfont icon-yanzhengma"></i>
          </template>
          <template #button>
            <van-count-down
              class="send-sms-btn"
              v-if="isShow"
              :time="1000*10"
              format="ss s"
              @finish="finish"
            />
            <van-button
              v-else
              class="send-sms-btn"
              size="small"
              round
              native-type="button"
              @click="onSendSms"
            >发送验证码</van-button>
          </template>
        </van-field>
        <div class="login-btn-wrap">
          <van-button class="login-btn" native-type="submit" type="info">登 录</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { login, getSmsCode } from "@/api/axios";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  name: "login",
  data() {
    return {
      // 用户输入信息
      userForm: {
        mobile: "13911111111",
        code: "246810",
      },
      // 校验规则
      userFormRules: {
        mobile: [
          {
            required: true,
            message: "手机号不能为空",
          },
          {
            pattern: /^1[3|5|7|8]\d{9}$/,
            message: "手机号格式错误",
          },
        ],
        code: [
          {
            required: true,
            message: "验证码不能为空",
          },
          {
            pattern: /^\d{6}$/,
            message: "验证码格式错误",
          },
        ],
      },
      isShow: false,
    };
  },
  methods: {
    // 登录
    async onSubmit() {
      // 检验输入的内容
      const user = this.userForm;
      // 状态加载效果
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true, // 禁用背景点击
        duration: 0, // 持续时间，默认 2000，0 表示持续展示不关闭
      });
      // 校验通过---发送请求
      try {
        //  成功
        const { data: res } = await login(user);

        console.log(res);
        
        this.$toast.success("登录成功");
        //  通过vuex保存token
        this.$store.commit("setUserToken", res.data);
        // 判断地址栏路径，从/user过来。就跳转首页。其他则返回上一页
        if (this.$store.state.login.URLType == "/user") {
          // 跳转首页
          this.$router.push("/");
        } else {
          // 返回上一页
          this.$router.back();
        }
      } catch (err) {
        // 失败
        if (err.response.status === 400) {
          this.$toast.fail("手机号或者验证码错误！");
        } else {
          this.$toast("登录失败，请稍后再试");
        }
      }
    },
    // 验证码按钮
    async onSendSms() {
      //验证手机号码是否正确
      try {
        await this.$refs.userFormRef.validate("mobile");
      } catch (err) {
        // 验证失败
        return this.$toast.fail("手机号格式错误！");
      }
      // 1.显示倒计时
      this.isShow = true;
      // 2.发送验证码短信
      try {
        const { data: res } = await getSmsCode(this.userForm.mobile);
        // 提示
        this.$toast("验证码已经发送至您的手机，请注意查收。");
      } catch (err) {
        // 失败
        if (err.response.status === 429) {
          this.$toast.fail("发送太频繁了，请稍后重试！");
        } else {
          this.$toast("网络繁忙，请稍后再试");
        }
      }
    },
    finish() {
      // 3.倒计时结束后显示按钮
      this.isShow = false;
    },
  },
  computed: {
    ...mapState({ qq: ["login"] }),
  },
};
</script>

<style scoped lang="less">
.login {
  /deep/.van-field__left-icon {
    display: flex;
    align-items: center;
  }
  .van-cell {
    .iconfont {
      font-size: 37px;
    }
    /deep/ .van-cell__value {
      padding-left: 20px;
      /deep/ .van-field__body {
        width: 100%;
        /deep/ input {
          height: 46px;
          font-size: 22px;
        }
      }
    }
  }
  .code_inp {
    /deep/ input {
      border-right: 2px solid #ededed;
    }
  }
  .send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 20px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
  }
  .login-btn-wrap {
    height: 88px;
    margin: 53px 28px;
    .login-btn {
      width: 100%;
      height: 100%;
      background-color: #6db4fb;
      border: none;
      border-radius: 10px;
      font-size: 28px;
    }
  }
}
</style>